<template>
    <div class="home_content">
        <div class="home_menu clearfix">
            <div class="context_link" v-for="item in category_list">
                <router-link :to="`/storage/${item.id}`">
                    <div class="font">
                        {{item.name}}
                    </div>
                </router-link>
            </div>
            <div class="context_btn">
                <router-link to="/storage">
                    <el-button round>全部分类
                        <span style="font-size: 12px">></span>
                    </el-button>
                </router-link>
            </div>
        </div>
        <div class="content clearfix common_container">
            <div class="content_body">
                <div class="content_title">
                    <h3>
                        <router-link :to="`/storage/${film_list[0].category_id}`" class="font">
                        电影精选
                        </router-link>
                    </h3>
                </div>
                <div class="video-card" v-for="(item, i) in film_list" :class="i+1===5?'margin-right0':''">
                    <a :href="`/video/${item.video_id}`">
                        <div class="card-image">
                            <img :src="item.image_url" class="image">
                            <div class="ranking-num">
                                <div class="ranking-num1" v-if="i+1===1">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num2" v-else-if="i+1===2">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num3" v-else-if="i+1===3">
                                    No.{{i+1}}
                                </div>
                                <div v-else>
                                    No.{{i+1}}
                                </div>
                            </div>
                            <div class="tag free-tag" v-if="item.is_free">
                                免费
                            </div>
                            <div class="tag vip-tag" v-else>
                                VIP
                            </div>
                            <span class="card-info score">{{item.score}}</span>
                        </div>
                    </a>
                    <div class="card-content">
                        <a :href="`/video/${item.video_id}`">
                            <span class="content-title">{{item.title}}</span>
                        </a>
                        <span class="heat"><span class="glyphicon glyphicon-fire"></span> {{item.heat}}</span>
                    </div>
                </div>
            </div>
            <div class="content_body">
                <div class="content_title">
                    <h3>
                        <router-link :to="`/storage/${series_list[0].category_id}`" class="font">
                        电视剧精选
                        </router-link>
                    </h3>
                </div>
                <div class="video-card" v-for="(item, i) in series_list" :class="i+1===5?'margin-right0':''">
                    <a :href="`/video/${item.video_id}`">
                        <div class="card-image">
                            <img :src="item.image_url" class="image">
                            <div class="ranking-num">
                                <div class="ranking-num1" v-if="i+1===1">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num2" v-else-if="i+1===2">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num3" v-else-if="i+1===3">
                                    No.{{i+1}}
                                </div>
                                <div v-else>
                                    No.{{i+1}}
                                </div>
                            </div>
                            <div class="tag free-tag" v-if="item.is_free">
                                免费
                            </div>
                            <div class="tag vip-tag" v-else>
                                VIP
                            </div>
                            <span class="card-info status">{{item.status}}</span>
                        </div>
                    </a>
                    <div class="card-content">
                        <a :href="`/video/${item.video_id}`">
                            <span class="content-title">{{item.title}}</span>
                        </a>
                        <a class="hot_search" href="/heat">
                            <span class="heat"><span class="glyphicon glyphicon-fire"></span> {{item.heat}}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="content_body">
                <div class="content_title">
                    <h3>
                        <router-link :to="`/storage/${variety_list[0].category_id}`" class="font">
                        综艺精选
                        </router-link>
                    </h3>
                </div>
                <div class="video-card" v-for="(item, i) in variety_list" :class="i+1===5?'margin-right0':''">
                    <a :href="`/video/${item.video_id}`">
                        <div class="card-image">
                            <img :src="item.image_url" class="image">
                            <div class="ranking-num">
                                <div class="ranking-num1" v-if="i+1===1">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num2" v-else-if="i+1===2">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num3" v-else-if="i+1===3">
                                    No.{{i+1}}
                                </div>
                                <div v-else>
                                    No.{{i+1}}
                                </div>
                            </div>
                            <div class="tag free-tag" v-if="item.is_free">
                                免费
                            </div>
                            <div class="tag vip-tag" v-else>
                                VIP
                            </div>
                            <span class="card-info status">{{item.status}}</span>
                        </div>
                    </a>
                    <div class="card-content">
                        <a :href="`/video/${item.video_id}`">
                            <span class="content-title">{{item.title}}</span>
                        </a>
                        <a class="hot_search" href="/heat">
                            <span class="heat"><span class="glyphicon glyphicon-fire"></span> {{item.heat}}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="content_body">
                <div class="content_title">
                    <h3>
                        <router-link :to="`/storage/${cartoon_list[0].category_id}`" class="font">
                        动漫精选
                        </router-link>
                    </h3>
                </div>
                <div class="video-card" v-for="(item, i) in cartoon_list" :class="i+1===5?'margin-right0':''">
                    <a :href="`/video/${item.video_id}`">
                        <div class="card-image">
                            <img :src="item.image_url" class="image">
                            <div class="ranking-num">
                                <div class="ranking-num1" v-if="i+1===1">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num2" v-else-if="i+1===2">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num3" v-else-if="i+1===3">
                                    No.{{i+1}}
                                </div>
                                <div v-else>
                                    No.{{i+1}}
                                </div>
                            </div>
                            <div class="tag free-tag" v-if="item.is_free">
                                免费
                            </div>
                            <div class="tag vip-tag" v-else>
                                VIP
                            </div>
                            <span class="card-info status">{{item.status}}</span>
                        </div>
                    </a>
                    <div class="card-content">
                        <a :href="`/video/${item.video_id}`">
                            <span class="content-title">{{item.title}}</span>
                        </a>
                        <a class="hot_search" href="/heat">
                            <span class="heat"><span class="glyphicon glyphicon-fire"></span> {{item.heat}}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="content_body">
                <div class="content_title">
                    <h3>
                        <router-link :to="`/storage/${playlet_list[0].category_id}`" class="font">
                        短片精选
                        </router-link>
                    </h3>
                </div>
                <div class="video-card" v-for="(item, i) in playlet_list" :class="i+1===5?'margin-right0':''">
                    <a :href="`/video/${item.video_id}`">
                        <div class="card-image">
                            <img :src="item.image_url" class="image">
                            <div class="ranking-num">
                                <div class="ranking-num1" v-if="i+1===1">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num2" v-else-if="i+1===2">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num3" v-else-if="i+1===3">
                                    No.{{i+1}}
                                </div>
                                <div v-else>
                                    No.{{i+1}}
                                </div>
                            </div>
                            <div class="tag free-tag" v-if="item.is_free">
                                免费
                            </div>
                            <div class="tag vip-tag" v-else>
                                VIP
                            </div>
                            <span class="card-info status">{{item.status}}</span>
                        </div>
                    </a>
                    <div class="card-content">
                        <a :href="`/video/${item.video_id}`">
                            <span class="content-title">{{item.title}}</span>
                        </a>
                        <a class="hot_search" href="/heat">
                            <span class="heat"><span class="glyphicon glyphicon-fire"></span> {{item.heat}}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="content_body">
                <div class="content_title">
                    <h3>
                        <router-link :to="`/storage/${documentary_list[0].category_id}`" class="font">
                        纪录片精选
                        </router-link>
                    </h3>
                </div>
                <div class="video-card" v-for="(item, i) in documentary_list" :class="i+1===5?'margin-right0':''">
                    <a :href="`/video/${item.video_id}`">
                        <div class="card-image">
                            <img :src="item.image_url" class="image">
                            <div class="ranking-num">
                                <div class="ranking-num1" v-if="i+1===1">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num2" v-else-if="i+1===2">
                                    No.{{i+1}}
                                </div>
                                <div class="ranking-num3" v-else-if="i+1===3">
                                    No.{{i+1}}
                                </div>
                                <div v-else>
                                    No.{{i+1}}
                                </div>
                            </div>
                            <div class="tag free-tag" v-if="item.is_free">
                                免费
                            </div>
                            <div class="tag vip-tag" v-else>
                                VIP
                            </div>
                            <span class="card-info status">{{item.status}}</span>
                        </div>
                    </a>
                    <div class="card-content">
                        <a :href="`/video/${item.video_id}`">
                            <span class="content-title">{{item.title}}</span>
                        </a>
                        <a class="hot_search" href="/heat">
                            <span class="heat"><span class="glyphicon glyphicon-fire"></span> {{item.heat}}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Home_content",
        data() {
            return {
                category_list: [], // 视频分类列表
                // 各类视频列表
                recommend_dic : {},
                film_list: [{}],
                series_list: [{}],
                variety_list: [{}],
                cartoon_list: [{}],
                playlet_list: [{}],
                documentary_list: [{}],
            };
        },
        methods: {
            // 获取分类
            get_category() {
                // 获取课程分类信息
                this.$axios.get(`${this.$settings.base_url}/video/category`).then(response => {
                    this.category_list = response.data;
                }).catch(() => {
                    this.$message({
                        message: "获取电影分类信息有误，请联系客服工作人员",
                    })
                })
            },
            // 获取推荐视频
            get_recommend_video(){
                // 获取信息
                this.$axios.get(`${this.$settings.base_url}/home/recommend`).then(response => {
                    this.film_list = response.data["电影"];
                    this.series_list = response.data["电视剧"];
                    this.variety_list = response.data["综艺"];
                    this.cartoon_list = response.data["动漫"];
                    this.playlet_list = response.data["短片"];
                    this.documentary_list = response.data["纪录片"];
                    this.recommend_dic = response.data
                    // console.log(this.recommend_dic)
                }).catch(() => {
                    this.$message({
                        message: "获取电影信息有误，请联系客服工作人员",
                    })
                })
            }
        },

        mounted() {
            $(".context_link a").css("color", "#333");
            $("a").css("text-decoration", "none");
        },
        created() {
            this.get_category();
            this.get_recommend_video()
        }
    }
</script>

<style scoped>
    .common_container {
        margin: 0 100px;
    }

    .home_content{
        background-color: #fbfbfb;
    }

    .content{
        margin-bottom: 50px;
    }
    .content_title {
        margin: 15px 0;
    }

    .content_body {
        height: 100%;
        margin-bottom: 50px;
    }
    .video-card{
        width: 16.5%;
        height: 300px;
        display: inline-block;
        /*padding: 5px;*/
        margin-right: 55px;
    }
    .card-image{
        padding: 10px 5px;
        position: relative;
        width: 100%;
        height: 100%;
    }
    .ranking-num1{
        height: 100%;
        background: url("../assets/img/num1.png");
        background-size: 100%;
        text-align: center;
    }
    .ranking-num2{
        height: 100%;
        background: url("../assets/img/num2.png");
        background-size: 100%;
        text-align: center;
    }
    .ranking-num3{
        height: 100%;
        background: url("../assets/img/num3.png");
        background-size: 100%;
        text-align: center;
    }
    .ranking-num{
        position: absolute;
        left: 7%;
        top: 5px;
        background: url("../assets/img/num_other.png");
        width: 34px;
        height: 24px;
        background-size: 100%;
        line-height: 20px;
        color: white;
        font-size: 12px;
        text-align: center;
    }
    .tag{
        position: absolute;
        float: right;
        right: 5%;
        top: 5px;
        color: white;
        font-size: 12px;
        text-align: center;
        width: 33px;
    }
    .vip-tag{
        background: #ebba73;
    }
    .free-tag{
        background: #fc4273;
    }
    .card-info{
        position: absolute;
        float: right;
        top: 88%;
        right: 6%;
        font-size: 16px;
        font-weight: 700;
    }
    .score{
        color: #ff5711;
    }
    .status{
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        background: rgba(0,0,0,.6);
        padding: 0 10px;
        border-radius: 10px;
    }
    .heat{
        float: right;
        font-size: 14px;
        line-height: 25px;
        color: #ff6200;
    }

    .content-title{
        font-weight: 700;
        color: #333;
        font-size: 15px;
        margin-left: 5px;
    }
    .content-title:hover{
        color: #0d9bff;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .home_menu{
        padding: 35px 20px;
        padding-left: 10%;
    }
    .context_link{
        line-height: 34px;
        font-size: 16px;
        margin: 0 15px;
        float: left;
        color: #333333;
    }
    .context_link :hover{
        color: #148aff;
    }

    .context_btn{
        font-size: 16px;
        float: right;
        margin-right: 13%;
    }

    .font{
        color: rgba(0,0,0,.65);
        font-weight: 700;
    }
    .font :hover{
        text-decoration: none;
    }

    .card-content{
        padding: 0 5px;
        position: relative;
    }

    .margin-right0{
        margin-right: 0;
    }
    img{
        border-radius: 5px;
        width: 100%;
        height: 100%;
        /*transition: all .5s ease-in-out;*/
        transition: all .5s linear;
        opacity: 3;
        background: linear-gradient(0.2deg,transparent,rgba(0,0,0,.6));
    }

    img:hover {
        /*transform: scale(1.1);*/
        transform: translateY(-7px);
        box-shadow: 0 0 6px #000;
    }

    a:hover{
        text-decoration: none;
        color: #148aff;
    }
    h3{
        font-weight: 700;
    }

</style>